<template>
    <div class="amap-view">
      <div id="container" :style="{ height: props.mapHeight,width: props.mapWidth }"/>
      <slot/>
    </div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader'
import {onMounted, shallowRef} from 'vue'
import setting from "../../settings";
let props = defineProps({
  mapHeight: {
    type: String,
    default: '20vh'
  },
  mapWidth: {
    type: String,
    default: '100%'
  },
  plugins: {
    type: Array,
    default: ()=> []
  },
  zoom: {
    type: Number,
    default: 5
  },
  center: {
    type: Array,
    default: ()=> [116.39, 39.9]
  }
})
let emit = defineEmits(['mapLoad'])
let map = shallowRef(null)
onMounted(() => {
  initMap()
})
const initMap = () => {
  AMapLoader.load({
    key: setting.AMAP_KEY,  // 申请好的Web端开发者Key，首次调用 load 时必填
    version: setting.AMAP_VERSION,      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: props.plugins,       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap) => {
    map = new AMap.Map("container", {  //设置地图容器id
      zoom: props.zoom,           //初始化地图级别
      center: props.center, //初始化地图中心点位置
    })
    emit('mapLoad', map)
  }).catch(e => {
    console.log(e)
  })
}
</script>

<style scoped lang="scss">

</style>
